 
<template>
  <el-dialog
  title="订单跟踪"
  :visible.sync="visible"
  width="40%"
  :before-close="handleClose"
  >  

   <el-steps direction="vertical" :active="1" space="65px" finish-status="success"  >
   
    <el-step    v-for="(item,index) in LogisticsList" :key="index" 
    :title="item.name" :description="item.time"></el-step>

  </el-steps>

   </el-dialog>
</template>

<script>
  const defaultLogisticsList = [
        {
            name: '订单已提交，等待付款',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '订单付款成功',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '在上海市进行下级地点扫描，等待付款',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '在分拨中心上海公司进行卸车扫描，等待付款',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '在上海公司进行发出扫描',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '到达目的地网点上海公司，快件将很快进行派送',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '订单已签收，期待再次为您服务',
            time: '2022-01-01 09:00:00 '
        }
    ];
export default {
  name: 'logisticsDialog' ,
  props:{
      value:Boolean,
      LogisticsList:Array,
      LogisticsActive:Number
  },
  data(){
    return {
        // LogisticsList: Object.assign({},defaultLogisticsList)
    }       
  },
  computed:{
      visible:{ 
          get(){
            return this.value
          },
          set(visible){
            this.value = visible
          }
      }
  },
  methods:{
      emitInput(val){
          this.$emit('input',val)
      },
      handleClose(){
        this.emitInput(false);
      }
  }
}
</script>

 